<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>公司信息 - 雁农冷链平台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 所需样式 -->
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.profile-container {
			padding: 20px;
		}
		.profile-card {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
			padding: 20px;
		}
		.company-header {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 30px;
			border-radius: 12px;
			margin-bottom: 20px;
			text-align: center;
		}
		.company-logo {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 20px;
			font-size: 32px;
		}
		.info-item {
			display: flex;
			align-items: center;
			padding: 15px 0;
			border-bottom: 1px solid #f0f0f0;
		}
		.info-item:last-child {
			border-bottom: none;
		}
		.info-label {
			width: 120px;
			color: #909399;
			font-weight: 500;
		}
		.info-value {
			flex: 1;
			color: #303133;
		}
		.cert-item {
			border: 1px solid #e4e7ed;
			border-radius: 8px;
			padding: 20px;
			margin-bottom: 15px;
			transition: all 0.3s;
			position: relative;
		}
		.cert-item:hover {
			border-color: #409eff;
			box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
		}
		.cert-valid {
			border-left: 4px solid #67c23a;
		}
		.cert-expiring {
			border-left: 4px solid #e6a23c;
		}
		.cert-expired {
			border-left: 4px solid #f56c6c;
		}
		.contact-item {
			background: #f8f9fa;
			border-radius: 8px;
			padding: 20px;
			margin-bottom: 15px;
			border-left: 4px solid #409eff;
		}
		.stats-card {
			text-align: center;
			padding: 20px;
			border-radius: 8px;
			background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
			color: white;
			margin-bottom: 20px;
		}
		.stats-number {
			font-size: 32px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.stats-label {
			font-size: 14px;
			opacity: 0.9;
		}
		.upload-area {
			border: 2px dashed #d9d9d9;
			border-radius: 8px;
			padding: 40px;
			text-align: center;
			color: #999;
			transition: all 0.3s;
		}
		.upload-area:hover {
			border-color: #409eff;
			color: #409eff;
		}
		.business-scope {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 10px;
		}
		.scope-tag {
			background: #f0f9ff;
			color: #409eff;
			padding: 5px 12px;
			border-radius: 15px;
			font-size: 12px;
			border: 1px solid #b3d8ff;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="profile-container">
			<h2 style="margin-bottom: 30px; color: #303133;">
				<i class="el-icon-office-building"></i> 公司信息管理
			</h2>
			
			<!-- 公司头部信息 -->
			<div class="company-header">
				<div class="company-logo">
					<i class="el-icon-office-building"></i>
				</div>
				<h2 style="margin: 0 0 10px 0;">{{companyInfo.name}}</h2>
				<p style="margin: 0; opacity: 0.9;">{{companyInfo.slogan}}</p>
				<div style="margin-top: 20px;">
					<el-tag type="success" size="medium">{{companyInfo.status}}</el-tag>
					<el-tag type="info" size="medium" style="margin-left: 10px;">成立{{companyInfo.establishedYears}}年</el-tag>
				</div>
			</div>
			
			<!-- 基本信息 -->
			<div class="profile-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-document"></i> 基本信息
					</h3>
					<el-button type="primary" size="small" @click="editCompanyInfo">
						<i class="el-icon-edit"></i> 编辑信息
					</el-button>
				</div>
				
				<el-row :gutter="40">
					<el-col :span="12">
						<div class="info-item">
							<div class="info-label">公司全称：</div>
							<div class="info-value">{{companyInfo.fullName}}</div>
						</div>
						<div class="info-item">
							<div class="info-label">统一社会信用代码：</div>
							<div class="info-value">{{companyInfo.creditCode}}</div>
						</div>
						<div class="info-item">
							<div class="info-label">法定代表人：</div>
							<div class="info-value">{{companyInfo.legalPerson}}</div>
						</div>
						<div class="info-item">
							<div class="info-label">注册资本：</div>
							<div class="info-value">{{companyInfo.registeredCapital}}</div>
						</div>
						<div class="info-item">
							<div class="info-label">成立日期：</div>
							<div class="info-value">{{companyInfo.establishedDate}}</div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="info-item">
							<div class="info-label">公司类型：</div>
							<div class="info-value">{{companyInfo.companyType}}</div>
						</div>
						<div class="info-item">
							<div class="info-label">经营期限：</div>
							<div class="info-value">{{companyInfo.businessTerm}}</div>
						</div>
						<div class="info-item">
							<div class="info-label">注册地址：</div>
							<div class="info-value">{{companyInfo.registeredAddress}}</div>
						</div>
						<div class="info-item">
							<div class="info-label">经营地址：</div>
							<div class="info-value">{{companyInfo.businessAddress}}</div>
						</div>
						<div class="info-item">
							<div class="info-label">经营范围：</div>
							<div class="info-value">
								<div class="business-scope">
									<span v-for="scope in companyInfo.businessScope" :key="scope" class="scope-tag">{{scope}}</span>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 资质证书 -->
			<div class="profile-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-medal"></i> 资质证书
					</h3>
					<el-button type="primary" size="small" @click="showCertDialog = true">
						<i class="el-icon-plus"></i> 添加证书
					</el-button>
				</div>
				
				<el-row :gutter="20">
					<el-col :span="12" v-for="cert in certificates" :key="cert.id">
						<div class="cert-item" :class="getCertClass(cert.status)">
							<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
								<h4 style="margin: 0; color: #303133;">{{cert.name}}</h4>
								<el-tag :type="getCertTagType(cert.status)" size="mini">{{cert.statusText}}</el-tag>
							</div>
							
							<div style="margin-bottom: 10px;">
								<span style="color: #909399;">证书编号：</span>{{cert.number}}
							</div>
							
							<div style="margin-bottom: 10px;">
								<span style="color: #909399;">颁发机构：</span>{{cert.issuer}}
							</div>
							
							<div style="margin-bottom: 15px;">
								<span style="color: #909399;">有效期：</span>{{cert.issueDate}} 至 {{cert.expiryDate}}
							</div>
							
							<div>
								<el-button size="mini" @click="viewCertificate(cert)">查看证书</el-button>
								<el-button size="mini" type="primary" @click="renewCertificate(cert)">续期</el-button>
								<el-button size="mini" type="warning" @click="editCertificate(cert)">编辑</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 联系方式 -->
			<div class="profile-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-phone"></i> 联系方式
					</h3>
					<el-button type="primary" size="small" @click="showContactDialog = true">
						<i class="el-icon-plus"></i> 添加联系人
					</el-button>
				</div>
				
				<el-row :gutter="20">
					<el-col :span="8" v-for="contact in contacts" :key="contact.id">
						<div class="contact-item">
							<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
								<h4 style="margin: 0; color: #303133;">{{contact.name}}</h4>
								<el-tag size="mini">{{contact.department}}</el-tag>
							</div>
							
							<div style="margin-bottom: 8px;">
								<i class="el-icon-position" style="color: #909399; margin-right: 8px;"></i>
								<span>{{contact.position}}</span>
							</div>
							
							<div style="margin-bottom: 8px;">
								<i class="el-icon-phone" style="color: #909399; margin-right: 8px;"></i>
								<span>{{contact.phone}}</span>
							</div>
							
							<div style="margin-bottom: 15px;">
								<i class="el-icon-message" style="color: #909399; margin-right: 8px;"></i>
								<span>{{contact.email}}</span>
							</div>
							
							<div>
								<el-button size="mini" @click="callContact(contact)">拨打电话</el-button>
								<el-button size="mini" type="primary" @click="editContact(contact)">编辑</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 经营数据 -->
			<div class="profile-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-data-analysis"></i> 经营数据
				</h3>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="stats-card">
							<div class="stats-number">{{businessStats.totalRevenue}}</div>
							<div class="stats-label">年营业额(万元)</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stats-card" style="background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);">
							<div class="stats-number">{{businessStats.employees}}</div>
							<div class="stats-label">员工总数</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stats-card" style="background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);">
							<div class="stats-number">{{businessStats.warehouses}}</div>
							<div class="stats-label">仓库数量</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stats-card" style="background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);">
							<div class="stats-number">{{businessStats.vehicles}}</div>
							<div class="stats-label">运输车辆</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		
		<!-- 添加证书对话框 -->
		<el-dialog title="添加资质证书" :visible.sync="showCertDialog" width="600px">
			<el-form :model="certForm" label-width="100px">
				<el-form-item label="证书名称">
					<el-input v-model="certForm.name" placeholder="请输入证书名称"></el-input>
				</el-form-item>
				<el-form-item label="证书编号">
					<el-input v-model="certForm.number" placeholder="请输入证书编号"></el-input>
				</el-form-item>
				<el-form-item label="颁发机构">
					<el-input v-model="certForm.issuer" placeholder="请输入颁发机构"></el-input>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="颁发日期">
							<el-date-picker v-model="certForm.issueDate" type="date" placeholder="选择日期"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="到期日期">
							<el-date-picker v-model="certForm.expiryDate" type="date" placeholder="选择日期"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="证书文件">
					<div class="upload-area" @click="uploadCertFile">
						<i class="el-icon-upload" style="font-size: 32px; margin-bottom: 10px;"></i>
						<div>点击上传证书文件</div>
						<div style="font-size: 12px; margin-top: 5px;">支持 PDF、JPG、PNG 格式</div>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showCertDialog = false">取消</el-button>
				<el-button type="primary" @click="saveCertificate">保存</el-button>
			</div>
		</el-dialog>
		
		<!-- 添加联系人对话框 -->
		<el-dialog title="添加联系人" :visible.sync="showContactDialog" width="500px">
			<el-form :model="contactForm" label-width="100px">
				<el-form-item label="姓名">
					<el-input v-model="contactForm.name" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="部门">
							<el-select v-model="contactForm.department" placeholder="选择部门">
								<el-option label="管理层" value="管理层"></el-option>
								<el-option label="运营部" value="运营部"></el-option>
								<el-option label="物流部" value="物流部"></el-option>
								<el-option label="财务部" value="财务部"></el-option>
								<el-option label="技术部" value="技术部"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="职位">
							<el-input v-model="contactForm.position" placeholder="请输入职位"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="电话">
					<el-input v-model="contactForm.phone" placeholder="请输入电话号码"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="contactForm.email" placeholder="请输入邮箱地址"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showContactDialog = false">取消</el-button>
				<el-button type="primary" @click="saveContact">保存</el-button>
			</div>
		</el-dialog>
	</div>
	
	<!-- 所需js -->
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script src="../../static/sa.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				companyInfo: {
					name: '雁农冷链物流有限公司',
					fullName: '雁农冷链物流有限公司',
					slogan: '专业冷链，安全可靠',
					status: '正常经营',
					establishedYears: 8,
					creditCode: '91110000123456789X',
					legalPerson: '张三',
					registeredCapital: '5000万元人民币',
					establishedDate: '2016-03-15',
					companyType: '有限责任公司',
					businessTerm: '2016-03-15至2046-03-14',
					registeredAddress: '北京市朝阳区建国路88号',
					businessAddress: '北京市朝阳区物流园区A区',
					businessScope: ['冷链物流', '仓储服务', '运输代理', '供应链管理', '食品配送']
				},
				certificates: [
					{
						id: 1,
						name: '道路运输经营许可证',
						number: 'JT-2023-001234',
						issuer: '北京市交通运输委员会',
						issueDate: '2023-01-15',
						expiryDate: '2027-01-14',
						status: 'valid',
						statusText: '有效'
					},
					{
						id: 2,
						name: '食品经营许可证',
						number: 'SP-2023-005678',
						issuer: '北京市市场监督管理局',
						issueDate: '2023-06-01',
						expiryDate: '2024-05-31',
						status: 'expiring',
						statusText: '即将到期'
					},
					{
						id: 3,
						name: 'ISO9001质量管理体系认证',
						number: 'ISO-2022-009876',
						issuer: '中国质量认证中心',
						issueDate: '2022-09-20',
						expiryDate: '2025-09-19',
						status: 'valid',
						statusText: '有效'
					},
					{
						id: 4,
						name: '危险品运输许可证',
						number: 'WX-2020-001122',
						issuer: '北京市应急管理局',
						issueDate: '2020-12-01',
						expiryDate: '2023-11-30',
						status: 'expired',
						statusText: '已过期'
					}
				],
				contacts: [
					{
						id: 1,
						name: '张经理',
						department: '管理层',
						position: '总经理',
						phone: '13800138001',
						email: 'zhang@company.com'
					},
					{
						id: 2,
						name: '李主管',
						department: '运营部',
						position: '运营主管',
						phone: '13800138002',
						email: 'li@company.com'
					},
					{
						id: 3,
						name: '王专员',
						department: '物流部',
						position: '物流专员',
						phone: '13800138003',
						email: 'wang@company.com'
					}
				],
				businessStats: {
					totalRevenue: 8500,
					employees: 156,
					warehouses: 8,
					vehicles: 45
				},
				showCertDialog: false,
				showContactDialog: false,
				certForm: {
					name: '',
					number: '',
					issuer: '',
					issueDate: '',
					expiryDate: ''
				},
				contactForm: {
					name: '',
					department: '',
					position: '',
					phone: '',
					email: ''
				}
			},
			methods: {
				getCertClass(status) {
					const classMap = {
						'valid': 'cert-valid',
						'expiring': 'cert-expiring',
						'expired': 'cert-expired'
					};
					return classMap[status] || '';
				},
				getCertTagType(status) {
					const typeMap = {
						'valid': 'success',
						'expiring': 'warning',
						'expired': 'danger'
					};
					return typeMap[status] || 'info';
				},
				editCompanyInfo() {
					this.$message.info('编辑公司基本信息');
					console.log('编辑公司信息');
				},
				viewCertificate(cert) {
					this.$message.info('查看证书：' + cert.name);
					console.log('查看证书：', cert);
				},
				renewCertificate(cert) {
					this.$message.success('开始续期：' + cert.name);
					console.log('续期证书：', cert);
				},
				editCertificate(cert) {
					this.$message.info('编辑证书：' + cert.name);
					console.log('编辑证书：', cert);
				},
				callContact(contact) {
					this.$message.success('拨打电话：' + contact.phone);
					console.log('拨打电话：', contact);
				},
				editContact(contact) {
					this.$message.info('编辑联系人：' + contact.name);
					console.log('编辑联系人：', contact);
				},
				uploadCertFile() {
					this.$message.info('上传证书文件');
					console.log('上传证书文件');
				},
				saveCertificate() {
					if (!this.certForm.name || !this.certForm.number) {
						this.$message.warning('请填写完整的证书信息');
						return;
					}
					
					this.$message.success('证书添加成功');
					console.log('新增证书：', this.certForm);
					
					// 重置表单
					this.certForm = {
						name: '',
						number: '',
						issuer: '',
						issueDate: '',
						expiryDate: ''
					};
					this.showCertDialog = false;
				},
				saveContact() {
					if (!this.contactForm.name || !this.contactForm.phone) {
						this.$message.warning('请填写完整的联系人信息');
						return;
					}
					
					this.$message.success('联系人添加成功');
					console.log('新增联系人：', this.contactForm);
					
					// 重置表单
					this.contactForm = {
						name: '',
						department: '',
						position: '',
						phone: '',
						email: ''
					};
					this.showContactDialog = false;
				}
			}
		});
	</script>
</body>
</html>